<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb>
      <el-breadcrumb-item>
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部导航 -->
    <div class="tab">
      <router-link to="/home">
        <i class="el-icon-arrow-left" style="font-size: 20px; font-weight: bold; color: #000;"></i>
      </router-link>
      <p style="font-size: 14px; font-weight: bold;margin-left: 20px;">退货地址管理</p>
    </div>
    <!-- 主体 -->
    <div class="content">
      <div style="padding: 20px 80px;">
        <table v-for="item in data" :key="item.id">
          <tr>
            <td>现有地址:</td>
            <td>{{ item.adress }}</td>
            <td><button class="btn" @click="setAd(item.id)">修改</button></td>
          </tr>
          <tr>
            <td>现有联系人信息:</td>
            <td>
              <p>电话:{{ item.num }}</p>
              <p>姓名:{{ item.name }}</p>
            </td>
            <td><button class="btn" @click="setPe(item)">修改联系人信息</button></td>
          </tr>
        </table>
        <!-- 修改地址 -->
        <div class="zz" v-show="ad">
          <div class="set">
            <!-- 头部 -->
            <div class="setTop">
              <p>修改地址</p>
              <i  @click="clo" class="el-icon-close" style="font-size: 20px;font-weight: bold;"></i>
            </div>
            <div style="padding: 20px;font-size: 14px;">
              <div class="lin">
                <p style="margin-right: 20px;margin-top: 10px;">选择地址</p>
                <v-distpicker @province="onChangeProv"
                  @city="onChangeCity"
                  @area="onChangeArea"></v-distpicker>
              </div>
              <div class="lin">
                <p style="margin-right: 20px;margin-top: 10px;">具体地址</p>
                <textarea v-model="xx" name="story" rows="5" cols="20" style="padding: 10px; color: #666666;" placeholder="请填写具体地址到门牌号"></textarea>
              </div>
              <div class="btnDiv">
              <button @click="adressOk">确定</button>
              <button @click="clo">取消</button>
            </div>
            </div>
          </div>
        </div>
        <!-- 修改电话姓名 -->
        <div class="zz" v-show="mes">
          <div class="set">
            <!-- 头部 -->
            <div class="setTop">
              <p>修改联系人</p>
              <i  @click="close" class="el-icon-close" style="font-size: 20px;font-weight: bold;"></i>
            </div>
            <div style="padding: 40px 20px;font-size: 14px;">
              <div class="lin">
                <p style="margin-right: 40px;margin-top: 10px;">联系人姓名:</p>
                <el-input class="ipt" v-model="name"></el-input>
              </div>
              <div class="lin">
                <p style="margin-right: 40px;margin-top: 10px;">联系人电话:</p>
                <el-input class="ipt" v-model="num"></el-input>
              </div>
              <div class="btnDiv">
              <button @click="setOk">确定</button>
              <button @click="close">取消</button>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VDistpicker from 'v-distpicker'
import {getAdressBx,setAdressBx} from '../../utils/api'
export default {
  data() {
    return {
      ad:false,
      mes:false,
      name:'',
      num:'',
      data:[],
      adress:'',
      xx:'',
      adId:0,
      peId:0,
    }
  },
  components: { VDistpicker },
  created(){
    this.render()
  },
  methods: {
    render(){
      getAdressBx().then(res=>{
        this.data = res.data.data
      })
    },
    // 修改地址按钮
    setAd(i){
      this.ad = true
      this.adId = i
    },
    clo(){
      this.ad = false
    },
    close(){
      this.mes = false
    },
    // 修改联系人按钮
    setPe(i){
      this.mes = true
      this.peId = i.id
      this.name = i.name
      this.num = i.num
    },
    onChangeProv(e) {
      this.adress = this.adress + e.value
      console.log(e);
    },
    onChangeCity(e) {
      this.adress = this.adress + e.value
      console.log(this.adress);
    },
    onChangeArea(e) {
      this.adress = this.adress + e.value
      console.log(this.adress);
    },
    // 修改地址
    adressOk(){
      this.adress = this.adress + this.xx
      setAdressBx({id:this.adId,adress:this.adress}).then(res=>{
        console.log(res);
        if(res.status == 200){
          this.render()
          this.ad =false
        }
      })
    },
    // 修改联系人
    setOk(){
      setAdressBx({id:this.peId,name:this.name,num:this.num}).then(res=>{
        console.log(res);
        if(res.status == 200){
          this.render()
          this.mes =false
        }
      })
    }

  }
}
</script>
<style scoped>
.ipt{
  width: 200px;
}
.btn{
  padding: 0 10px;
  height: 30px;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 3px;
  background-color: #fff;
}
.btnDiv button {
  border: 1px solid rgba(187, 187, 187, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;
  width: 50px;
  height: 30px;
}

.btnDiv {
  width: 25%;
  display: flex;
  margin-left: 100px;
  margin-top: 80px;
  justify-content: space-between;
} 
label {
  height: 20px;
  font-size: 14px;
}
.distpicker-address-wrapper {
  select {
    width: 255px !important;
    padding: 0px 10px !important;
    margin-left: 10px !important;
    height: 30px !important;
    font-size: 14px !important;
    line-height: 30px !important;
  }
}
.lin {
  display: flex;
  margin-bottom: 20px;
}

.setTop {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(142, 142, 142, 0.667);
}

.set {
  font-size: 14px;
  width: 50%;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 55%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 5px;

}

.zz {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.adress {
  width: 60%;
  height: 300px;
  border: 1px solid #ababab;
}

table {
  width: 50%;
  margin-top: 30px;
  border: 1px solid #777777;
  border-collapse: collapse;
  text-align: center;
  /* width: 100%; */
  font-size: 14px;
}

tr {
  height: 50px;
}

td {
  width: 100px;
  border: 1px solid #777777;
}

th {
  height: 50px;
  line-height: 50px;
  font-weight: normal;
  background-color: #F6F6F6;
  border: 1px solid #777777;
}

.content {
  width: 100%;
  height: 100%;
  font-size: 14px;
}

.tab {
  padding: 20px 40px;
  display: flex;
}
</style>